<!DOCTYPE html>
<html>
<!-- 实现手指弯曲 计数 -->
<head>
    <meta charset="utf-8">
    
    <script src="https://cdn.jsdelivr.net/npm/electroluxasset/mediapipe/holistic/camera_utils.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/electroluxasset/mediapipe/holistic/control_utils.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/electroluxasset/mediapipe/holistic/drawing_utils.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/electroluxasset/mediapipe/holistic/holistic.js" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <video class="input_video" width="600px"></video>
        
    </div>

    <script type="module">
        const videoElement = document.getElementsByClassName('input_video')[0];
   
        function onResults(results) {
            //    
            // interface result {
            //    leftHandLandmarks?:Array<result_base>
            //    rightHandLandmarks?:Array<result_base>
            //    faceLandmarks?:Array<result_base>
            //    poseLandmarks?:Array<result_base>
            // }
            console.log(results)
           
        }

        const holistic = new Holistic({
            locateFile: (file) => {
                console.log(file,"file")
                return `https://cdn.jsdelivr.net/npm/electroluxasset/mediapipe/holistic/locate/${file}`;
            }
        });
        holistic.setOptions({
            modelComplexity: 1,
            smoothLandmarks: true,
            enableSegmentation: true,
            smoothSegmentation: true,
            refineFaceLandmarks: true,
            minDetectionConfidence: 0.5,
            minTrackingConfidence: 0.5
        });
        holistic.onResults(onResults);

        const camera = new Camera(videoElement, {
            onFrame: async () => {
                await holistic.send({ image: videoElement });
            },
            width: 1280,
            height: 720
        });
        camera.start();
    </script>

</body>

</html>